<template>
    <router-link :to='{path:"info",query:{id:item.id}}'>
        <li>
            <div class="item">
                <img :src="$store.getters.base_url+item.logo" class="logo"/>
                <div class="text-content">
                    <p class="item_text"><span class="store_title">{{item.shop_name}}</span><span class="iconfont icon-bao title_icon"></span></p>
                    <p class="item_text"><Star :score="item.score"></Star><span class="iconfont icon-waimai subTitle_icon"></span></p>
                    <p class="item_text"><span>配送￥{{delivery}}</span></p>
                </div>
            </div>
            <div class="product-list">
                <div v-for="(i,k) of item.goods" :key="k">
                    <img :src="$store.getters.base_url+i.pic" class="product-img">
                    <p class="product-text">{{i.name}}</p>
                    <p class="product-text">￥<span class="product-price">{{i.price}}</span>元</p>
                </div>
            </div>
        </li>
    </router-link>
</template>
<script>
import Star from './star'
export default {
    name:'storeList',
    props:["item","delivery"],
    data() {
        return {
            
        }
    },
    components:{
        Star
    }
}
</script>
<style scoped>
    li{
        list-style: none;
    }
        .item {
        height: 6rem;
        display: flex;
        align-items: center;
        margin: 0 0.6rem;
    }
        .logo {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 5px;
        margin-right:1rem;
    }
        .text-content {
        width: 85%;
    }
        .item_text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height:1.5rem;
        font-size: 0.8rem;
    }
        .store_title {
        font-size: 1rem;
        font-weight: bolder;
        max-width: 70%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
        .title_icon {
        color: #02a774;
        font-size: 1.5rem;
    }
    .subTitle_icon {
        font-size: 1rem;
        padding-right: 0.25rem;
    }
        .product-list{
        width: 100%;
        white-space: nowrap;
        overflow: auto;
        border-bottom: 2px solid #ccc;
    }
    .product-list div{
        width: 4rem;
        height: 6rem;
        /* border: 1px solid red; */
        display: inline-block;
        text-align: center;
        padding: 0.4rem;
    }
        .product-img{
        width: 4rem;
        height: 4rem;
        margin: auto;
    }
        .product-text{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
        .product-price{
        color: red;
    }
</style>